﻿<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body {background-color:#4C92E7;padding:1em;margin:0px;font-family:Arial;}
.odd {background-color:#9FC4F3}
.even {background-color:#DCE9F9}
.odd, .even {
  padding:0px 1em;
  }
#data, #result {
  background-color:#9FC4F3;
  border:2px groove #ECE9D8;  
  margin:0px;
  padding:0px;
  padding-top:0.6em;
  }

#result {
  margin-top:1em;
  }

#dataLegend, #resultLegend {
  background-color:#DCE9F9;
  border:2px groove #ECE9D8;
  padding: 0.2em 0.5em;
  color:green;
  }

#dataLegend {
  position:absolute;
  right:2em;
  top:0.1em;
  }

.legendContainer {
  position:relative;
  width:100%;
  }

#resultLegend {
  position:absolute;
  right:1em;
  top:-1.5em;
  }

#add,#minus,#compute {
  padding:0px 1em;
  line-height:1.2;
  }

.left {
  float:left;
  width:25%;
  text-align:right;
  }

#url {
  width:70%;
  }

.fieldName, .fieldValue {
  width:35%;
  }

#rawQuery {
  width:65%;
  }

#methodText {
  width:6em;
  }

#languageContainer {
  position:relative;
  }

#language {
  position:absolute;
  right:2.3em;
  top:-1.5em;
  }

.resultUrl {
  width:73%;
  }

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="data">
<div id="dataLegend">資料</div>
<div class="odd">
  <label for="url" id="urlLabel" class="left">使用各種 method 的 url ：</label>
  <input id="url" type="text" />
</div>
<div class="even">
  <label for="general" id="generalLabel" class="left">一般查詢：</label>
  <input id="general" name="queryType" type="radio" value="general" />
  <button id="add">增加查詢欄位</button>
  <button id="minus">減少查詢欄位</button>
</div>
<div class="odd">
  <label for="raw" id="rawLabel" class="left">原始查詢字串：</label>
  <input id="raw" name="queryType" type="radio" value="raw" />
  <input id="rawQuery" type="text" />
</div>
<div class="even">
  <label for="method" id="methodLabel" class="left">請求 METHOD ：</label>
  <input id="methodText" type="text" readonly="true" />
  <select id="method">
    <option value="POST">POST</option>
    <option value="GET">GET</option>
    <option value="HEAD">HEAD</option>
    <option value="custom" id="custom">**自訂**</option>
  </select>
</div>
<div class="odd">
  <span class="left">&nbsp;</span>
  <button id="compute">運算</button>
</div>
<div id="languageContainer"><div id="language">
    <button id="chinese" >中文</button><button id="english">English</button>
</div></div>
</div>
<div id="result">
<div class="legendContainer"><div id="resultLegend">結果</div></div>
<div class="odd">
  <label for="html" id="htmlLabel" class="left">html + form + javascript：</label>
  <input id="html" type="text" class="resultUrl" readonly="true" />
</div>
<div class="even">
  <label for="svg" id="svgLabel" class="left">SVG + form + javascript：</label>
  <input id="svg" type="text" class="resultUrl" readonly="true" />
</div>
<div class="odd">
  <label for="python" id="pythonLabel" class="left">伺服器端（Python）：</label>
  <input id="python" type="text" class="resultUrl" readonly="true" />
</div>
</div>
<script>
$(function($){
  var fieldCount = 0;
  var isRaw = false;
  var checkClick = function(arg){
    checkClick = function(){};
    if(!$('[name=queryType]:checked')[0])
      if(arg==="general")
        $('#general').click();
      else if(arg==="raw")
        $('#raw').click();
  };
  $('#add').click(function(){
    checkClick('general');
    $('.field').stop(true,true);
    var newNode = $('<div></div>', {'class':'field'}).append(
      $('<span></span>', {'class':'left', html:'&nbsp;'})
    ).append(
      $('<input />', {'class':'fieldName',id:'fieldName'+fieldCount})
    ).append('=').append(
      $('<input />', {'class':'fieldValue',id:'fieldValue'+fieldCount})
    ).hide().insertAfter($($('.field:last')[0] || $('#data .odd:first')[0]));
    $('#data > div:not(:last)').removeClass('even odd')
      .filter(':odd').addClass('odd').end()
      .filter(':even:gt(0)').addClass('even');
    newNode.slideDown(400);
    ++fieldCount;
  });
  $('#minus').click(function(){
    checkClick('general');
    $('.field').stop(true,true);
    $('.field:last').slideUp(400,function(){
      $(this).remove();
      --fieldCount;
      $('#data > div:not(:last)').removeClass('even odd')
        .filter(':odd').addClass('odd').end()
        .filter(':even:gt(0)').addClass('even');
    });
  });
  $('#rawQuery').focus(function(){
    $(this).unbind('focus');
    checkClick('raw');
  });
  $('#general').click(function(){
    isRaw = false;
    $('.field').stop(true,true);
    $('.fieldName').removeAttr('disabled');
    $('.fieldValue').removeAttr('disabled');
    $('#add').removeAttr('disabled');
    $('#minus').removeAttr('disabled');
    $('#rawQuery').attr('disabled','disabled');
  });
  $('#raw').click(function(){
    isRaw = true;
    $('.field').stop(true,true);
    $('.fieldName').attr('disabled','disabled');
    $('.fieldValue').attr('disabled','disabled');
    $('#add').attr('disabled','disabled');
    $('#minus').attr('disabled','disabled');
    $('#rawQuery').removeAttr('disabled');
  });
  var methodVal = $('#method').val();
  if(methodVal !== 'custom')
    $('#methodText').val(methodVal);
  else
    $('#methodText').val('').removeAttr('readonly');
  $('#method').change(function(){
    var methodVal = $('#method').val();
    if(methodVal !== 'custom')
      $('#methodText').val(methodVal);
    else
      $('#methodText').val('').removeAttr('readonly').focus();
  });
  $('#compute').click(function(){
    var queryString = "?url=";
    var url = $('#url').val();
    var urlResult = [];
    for(var matchResult, index=0, pattern = /[\:\/\=]/g;matchResult = pattern.exec(url); index = matchResult.index + 1){
      urlResult.push(encodeURIComponent(url.substring(index,matchResult.index)));
      urlResult.push(matchResult[0]);
    }
    urlResult.push(encodeURIComponent(url.substring(index)));
    url = urlResult.join("");
    if($('#general:checked')[0]){
      var fieldCount2 = 0, fieldName, fieldValue,field;
      var queryFields = [];
      while(fieldName = '#fieldName'+fieldCount2,fieldValue = '#fieldValue'+fieldCount2++,(field = $(fieldName))[0]){
        queryFields.push(encodeURIComponent(field.val()) + '=' + encodeURIComponent($(fieldValue).val()));
      }
      if(queryFields.length){
        url += '&query=' + queryFields.join('|');
      }
    } else if($('#raw:checked')[0]){
      url += '&query=' + encodeURIComponent($('#rawQuery').val()) + '&rawquery=true'
    }
    var methodVal = $('#methodText').val();
    if(methodVal)
      url += '&method=' + methodVal;
    var host = "http://convert-get-proxy.appspot.com/";
    if(!isRaw){
      $('#html').val(host + 'form_js/?url=' + url);
      $('#svg').val(host + 'svg_form_js/?url=' + url);
    } else {
      $('#html').val('');
      $('#svg').val('');
    }
    $('#python').val(host + 'server/?url=' + url);
  });
  $('#english').click(function(){
    $('#dataLegend').text('data');
    $('#urlLabel').html('<b>url</b> using various method：');
    $('#generalLabel').html('<b>general</b> query：');
    $('#add').text('add query field');
    $('#minus').text('reduce query field');
    $('#rawLabel').html('<b>raw</b> query string：');
    $('#methodLabel').html('request <b>method</b>：');
    $('#custom').text('**custom**');
    $('#compute').text('compute');
    $('#resultLegend').text('result');
    $('#pythonLabel').text('server side (Python) ：');
  });
  $('#chinese').click(function(){
    $('#dataLegend').text('資料');
    $('#urlLabel').text('使用各種 method 的 url ：');
    $('#generalLabel').text('一般查詢：');
    $('#add').text('增加查詢欄位');
    $('#minus').text('減少查詢欄位');
    $('#rawLabel').text('原始查詢字串：');
    $('#methodLabel').text('請求 METHOD ：');
    $('#custom').text('**自訂**');
    $('#compute').text('運算');
    $('#resultLegend').text('結果');
    $('#pythonLabel').text('伺服器端（Python）：');
  });
  $('.resultUrl').focus(function(){
    var self = this;
    setTimeout(function(){self.select();},1);
  });
});
</script>
</body>
</html>